<template>
	<view>
		<!-- 店铺照片 -->
		<view class="show-img">
			<image src="/static/washProImg/ide.png"></image>
		</view>
		<!-- 加油站的基本信息 -->
		<view class="header">
			<view class="header-list">
				中途石油加油站
			</view>
			<view class="header-box">
				<view class="header-box-one">
					营业时间：周一至周五 09：00-22：00
				</view>
				<view class="header-box-phone">
					<uni-icons type="phone-filled" size="26" color="#4049ff"></uni-icons>	
				</view>
			</view>
			<view class="header-item">
				<view class="header-item-text">
					山阳区人民路中路32号
				</view>
				<view class="header-item-nav" @click="">
					<uni-icons type="paperplane-filled" size="30" color="#4049ff"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 加油站的价格详情 -->
		<view class="cost">
			<view class="cost-h1">
				油价详情
				<view class="cost-box" v-for="index in 5" :key="index">
					<view class="cost-box-name">
						92#
					</view>
					<view class="cost-box-price">
						￥7.25L
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.show-img{
		width: 100%;
		/* background-color: #785785; */
		margin: 5RPX 10RPX;
	}
	.show-img image{
		width: 730RPX;
		height: 450RPX;
	}
	/* 店铺信息整体框架 */
	.header{
		width: 100%;
		margin: 5rpx 10rpx;
		/* padding: 5rpx 10rpx; */
	}
	/* 标题 */
	.header-list{
		width: 97%;
		height: 60rpx;
		font-weight: bold;
		font-size: 35rpx; /* 字体大小 */
		line-height: 60rpx;
	}
	/* 标题下面的应以额时间盒子 */
	/* 带电话的 */
	.header-box{
		width: 97%;
		height: 40rpx;
		display: flex; /* 使用flex布局 */
		justify-content: space-between; /* 子元素之间均匀分布 */
		white-space: nowrap; /* 不换行 */
		margin: 8rpx 0; /* 外边距 */
		font-size: 28rpx; /* 字体大小 */
		line-height: 40rpx;
	}
	.header-box-one{
		font-size: 28rpx
	}
	.header-box-phone{
		margin-right: 20rpx;
	}
	/* 地址和导航  盒子 */
	.header-item{
		width: 97%;
		height: 80rpx;
		display: flex; /* 使用flex布局 */
		justify-content: flex-start; /* 子元素紧挨着左对齐 */
		white-space: nowrap; /* 不换行 */
		margin: 8rpx 0 18rpx; /* 外边距 */
		font-size: 28rpx; /* 字体大小 */
		line-height: 80rpx;
		 border-bottom: 1rpx solid rgba(0, 0, 0, 0.4); /* 下边框 1rpx，实心黑色 */
	}
	.header-item-text{
		font-size: 28rpx
	}
	.header-item-nav{
		margin-left: 30rpx;
	}
	.cost{
		width: 97%;
		display: flex; /* 使用flex布局 */
		padding: 0 10rpx;
	}
	.cost-h1{
		width: 100%;
		height: 50rpx;
		font-size: 35rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.cost-box{
		/* background-color: #ff9; */
		width: 87%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex; /* 使用flex布局 */
		justify-content: space-between; /* 子元素之间均匀分布 */
		white-space: nowrap; /* 不换行 */
		margin: 0 auto; /* 外边距 */
		font-size: 25rpx;
		color: rgba(0, 0, 0, 0.6);
		 border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		 /* background-color: #f78; */
		
	}
	.cost-box-name{
		padding-left: 180rpx;
	}
	.cost-box-price{
		padding-right: 180rpx;
	}
	

</style>
